<template>
	<view class="loginPage flex" @touchmove.stop="app.util.hideKeyboard()" :style="{ '--fss': app.theme.fss() }">
		<common-header title="" background="rgba(0,0,0,)" />
		<view class="loginHead">
			<view class="h3">手机号登录</view>
			<view class="desc">首次注册即视为登录，我们不会向您发送任何营销短信</view>
		</view>
		<view class="loginView">
			<view class="phoneView flex">
				<text class="iconfont icon-shouji1"></text>
				<input type="number" v-model="info.mobile" maxlength="11" placeholder="请输入手机号" class="input" placeholder-style="color:rgba(255,255,255,0.6);font-weight: normal;" :adjust-position="false" />
				<text v-if="countDown" class="code disabled">{{ countDown }}s后可发送</text>
				<text v-else class="code" :class="info.mobile.length !== 11 ? 'disabled' : ''" @tap="handleCodeSend">发送验证码</text>
			</view>
			<view class="phoneView flex">
				<text class="iconfont icon-yanzhengma" style="font-size:calc(38rpx * var(--fss));"></text>
				<input type="number" v-model="info.code" maxlength="6" placeholder="6位数的验证码" class="input" placeholder-style="color:rgba(255,255,255,0.6);font-weight: normal;" :adjust-position="false" />
			</view>
			<view class="loginBtn" @tap="loginMobile">立即登录</view>
		</view>
	</view>
	<common-toast ref="commonToastRef" />
</template>

<script setup>
	import { ref, inject } from "vue";
	import { onUnload } from "@dcloudio/uni-app";
	const app = inject('app');
	
	/* 变量区域 */
	// 基本信息
	const info = ref({ mobile: "",code: "" });
	
	// 验证码倒计时
	const countDown = ref(0);
	const countDownTimer = ref(null);
	
	// 通用toast
	const commonToastRef = ref();
	
	
	/* 方法区域 */
	// 验证码发送
	function handleCodeSend() {
		if (info.value.mobile.length !== 11) {
			commonToastRef.value.open({ type: "warning", text: "手机号有误" });
			return;
		}
		
		commonToastRef.value.open({ type: "loading", text: "正在发送.." });
		app.request.ajax({
			url: "/api/basis/sms_action",
			method: "POST",
			data: { mobile: info.value.mobile },
			success() {
				countDown.value = 60;
				countDownTimer.value = setInterval(() => {
					countDown.value--;
					if (countDown.value === 0) {
						clearInterval(countDownTimer.value);
					}
				}, 1000);
			},
			done() {
				commonToastRef.value.close();
			}
		});
	}
	
	// 点击手机号码登录
	function loginMobile(){
		if (info.value.mobile.length !== 11) {
			commonToastRef.value.open({ type: "warning", text: "手机号有误" });
			return;
		}
		if (info.value.code.length !== 6) {
			commonToastRef.value.open({ type: "warning", text: "验证码有误" });
			return;
		}
		
		commonToastRef.value.open({ type: "loading", text: "登录中.." });
		app.request.ajax({
			url: "/api/login/login",
			method: "POST",
			data: info.value,
			success(res) {
				commonToastRef.value.close();
				app.util.loginSuccess(res.data.info);
				
				setTimeout(() => {
					app.util.goBack(true);
				},300);
			},
			error(err){
				commonToastRef.value.close();
				commonToastRef.value.open({ type: "error", text: err.msg });
			}
		});
	}
	
	
	// 当页面生命周期结束的时候
	onUnload(() => {
		clearInterval(countDownTimer.value);
	});
</script>

<style lang="scss" scoped>
	.loginPage{
		height: 100vh;
		width: 100vw;
		overflow: hidden;
		flex-direction: column;
		background: url("/static/img/loginBackground.png")no-repeat center top;
		background-size: contain;
		background-color: #11121b;
	}
</style>